/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<view class="beijing">
			<image src="../static/upload-banner.png" mode="aspectFill"></image>
		</view>
		<form @submit="submit" :model="applyForm">
			<view class="setliveparam"><text style="color: red;">*</text>选择媒体类型</view>
			<xfl-select 
				:list="media"
				:clearable="false"
				:showItemNum="5" 
				:style_Container="'height: 50px; font-size: 16px;'"
				:placeholder = "'请点击右侧倒三角选择'"
				:selectHideType="'hideAll'"
				@change='selected_media'
				v-model="applyForm.media"
			>
			</xfl-select>
			<view class="setliveparam" @click="openLevel"><text style="color: red;">*</text>选择课程分类</view>
			<input class="name" @click="openLevel" :value="fenleiname" disabled placeholder="请选择课程分类" style="background-color: #ddd;"/>
			<input class="name"  v-model="applyForm.fenleiid" style="background-color: #ddd;display: none;"/>
			<w-picker
				:visible.sync="visible"
				mode="linkage"
				:value="treeData"
				:options="treeData"
				:level="2"
				default-type="id"
				:default-props="defaultProps1"
				@confirm="onConfirm($event,'linkage')"
				@cancel="onCancel"
				ref="linkage" 
			></w-picker>
			<view class="setliveparam"><text style="color: red;">*</text>目录名</view>
			<input class="name" v-model="applyForm.menuname" type="text" placeholder="请输入目录名" />
			<view class="setliveparam"><text style="color: red;">*</text>价格</view>
			<input class="name" v-model="applyForm.price" type="number" placeholder="请输入课程价格" />
			<view class="setliveparam">概述</view>
			<input class="name" v-model="applyForm.jianjie" type="text" placeholder="一句话概述" />
			<view class="setliveparam">赠送积分</view>
			<input class="name" v-model="applyForm.zsscore" type="number" placeholder="请输入赠送多少积分" />
			<view class="setliveparam"><text style="color: red;">*</text>上传课程封面 <text style="color: green;" v-if="applyForm.thumb">√</text></view>
			<view class="file">
				<image @click="upLoadImage" :src="applyForm.thumb ? applyForm.thumb : '/static/default-image.png'" mode="aspectFit"></image>
			</view>
			<view class="setliveparam"><text style="color: red;">*</text>填写课程介绍</view>
		</form>
		<robin-editor class="editor"
		@cancel="hideEditor" @save="saveEditor"
		    v-model="html"
		    :imageUploader="uploadImg" 
		    :muiltImage="true"
			>
		</robin-editor>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-seconds="true" @confirm="ed" @cancel="ed" />
		
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import MxDatePicker from "../mx-datepicker/mx-datepicker.vue";
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import { postTeacherJsreg, postSendCode } from '@/request/tutor'
	import {checkUserinfo} from '@/request/checkUserinfo'
	export default {
		 components: {
		            MxDatePicker,
					xflSelect,
					wPicker
		        },
		data() {
			return {
				HOST_URL:uni.HOST_URL,
				userinfo: {},
				is_sh: 0,
				flag:false,
				timetext:'获取验证码',
				tinfo:[],
				applyForm: {
					media:'',
					menuname: '',
					jianjie: '',
					price: '',
					zsscore:'',
					thumb:'',
					fenleiid:''
				},
				html:'',
				media:[
					{name:'视频',value:'video'},
					{name:'音频',value:'audio'},
					{name:'图文',value:'tuwen'},
					{name:'不限',value:'all'}
				],
				showPicker: false,
				datetime: '',
				type: 'datetime',
				value: '',
				defaultProps1:{"label":"name","value":"id","children":"children"},
				visible:false,
				treeData:[],
				fenleiname:''
			};
		},
		onLoad() {
			this.get_fltree()
		},
		onShow() {
			checkUserinfo()
			let userinfo=uni.getStorageSync('userinfo')
			this.userinfo = userinfo.userdata
			this.checkTinfo(this.userinfo.id)
			// this.get_fltree()
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		// onReady() {
		// 	this.$refs.linkage.show()
		// },
		methods: {
			get_fltree(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/courses/fl_select_json',
					method:'POST',
					data:{	
					},
					success:(res) =>{
						console.log(res.data);
						this.treeData=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			
			openLevel() {
				this.visible=true;
			},
			onCancel(){
				this.visible=false;
			},
			onConfirm(e) {
				// e 确认后选中的数据
				console.log(e)
				this.fenleiname=e.result;
				this.applyForm.fenleiid=e.value.toString();
			},
			fl_select(res){
				console.log(res)
			},
			selected_media (e) {
				console.log(e)
				this.applyForm.media = e.newVal
			},
			uploadImg: function(img, callback) {
				const BASE_URL=uni.BASE_URL;
			    uni.uploadFile({
			    	url:BASE_URL+'index/upload/uploadLocality',		//post请求的地址
			    	filePath:img,
			    	name:'file',	
			    	success: (uploadFileRes) => {
			    		//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
			    		var imgurl = uploadFileRes.data;
			    		callback(imgurl)
			    	}
			    })
			},
			hideEditor(){
				uni.navigateBack()
			},
			saveEditor: function(e) {
			    this.html = e.html
				this.applyForm.tid = this.tinfo.id
				this.applyForm.introduce = this.html
				console.log(this.applyForm)
				if(this.applyForm.menuname == ''){
					uni.showToast({
						title:'目录名称不能为空,请完善信息',
						icon:'none'
					})
				}else if(this.applyForm.media == ''){
					uni.showToast({
						title:'请选择媒体类型',
						icon:'none'
					})
				}else if(this.applyForm.fenleiid == ''){
					uni.showToast({
						title:'请选择课程分类',
						icon:'none'
					})
				}
				else if(this.html == ('' || '<p><br></p>' || '<p wx:nodeid="85"><br wx:nodeid="86"></p>')){
					uni.showToast({
						title:'课程介绍不能为空,请完善信息',
						icon:'none'
					})
				}else if(this.applyForm.thumb == ''){
					uni.showToast({
						title:'封面图片不能为空,请完善信息',
						icon:'none'
					})
				}else if(this.applyForm.price == ''){
					uni.showToast({
						title:'价格不能为空,请完善信息',
						icon:'none'
					})
				}else{
					const BASE_URL = uni.BASE_URL
					uni.request({
						url: BASE_URL+'index/courses/add_menu',
						data:this.applyForm,
						method:'POST', 
						success:(res) =>{
							if(res.data.code == 0){
								uni.showToast({
									title:'添加成功',
									icon:'none'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						},
						fail:(res)=> {
							console.log(res.data);
						}
					});
				}
			},
			DatePicker(type){//显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) {//选择
				this.showPicker = false;
				if(e) {
					this[this.type] = e.value; 
					this.applyForm.zbtime=e.value;
					//选择的值
					console.log('value => '+ e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},
			checkTinfo(uid){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/teacher/tinfo',
					method:'POST',
					data:{
						uid:uid,
					},
					success:(res) =>{
						console.log(res.data);
						if(res.data.code==0){
							this.tinfo=res.data.data
							if(res.data.data.is_verify==0){
								this.is_verify=true
							}else{
								this.is_verify=false
							}
						}else{
							setTimeout(()=>{
								uni.navigateTo({
									url:'../recruit/recruit'
								})
							},1500)
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			upLoadImage(){
				uni.chooseImage({
				    count:1,
					sizeType:['copressed'],
				    success:(res)=>{
						const BASE_URL=uni.BASE_URL;
						const HOST_URL = uni.HOST_URL;
				        const tempFilePaths = res.tempFilePaths;
						var imgFiles = res.tempFilePaths[0];
						var that=this
				        uni.uploadFile({
							url:BASE_URL+'index/upload/upload',		//post请求的地址
							filePath:imgFiles,
								name:'file',	
							success: (uploadFileRes) => {
								this.applyForm.thumb = uploadFileRes.data;
							}
						})
				    },
				})
			},
		}
	}
</script>

<style lang="less" scoped>
// .container{
// 	padding-top: 75rpx;
// }
.beijing {
	margin-top: 75rpx;
	image {
		width: 750upx;
		height: 350upx;
	}
	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 55upx;
		left: 300upx;
		image {
			width: 150upx;
			height: 150upx;
			border-radius: 50%;
		}
		text {
			font-size: 34upx;
			color: #fff;
			margin-top: 20upx;
		}
	}
}

form {
	.media_select{
		width: 690upx;
		height: 80upx;
		border: 2upx solid #333;
		border-radius: 10upx;
		margin: 20upx 30upx 0;
		padding-left: 20upx;
		box-sizing: border-box;
		view{
			height: 80upx;
		}
	}
	.setliveparam{
		margin: 20upx;
	}
	slider{
		padding: 0 15rpx;
	}
	.name, .phone {
		width: 690upx;
		height: 80upx;
		border: 2upx solid #c0c4cc;
		border-radius: 10upx;
		margin: 20upx 30upx 0;
		padding-left: 20upx;
		box-sizing: border-box;
	}
	.wrapper .container{
		margin-top: 0;
	}
	.file {
		padding: 0 15upx;
		image {
			width: 150upx;
			height: 150upx;
			margin: 30upx 0 0 30upx;
			border: 2upx dotted #eee;
			border-radius: 10upx;
			box-shadow: 5upx 5upx 5upx 5upx #ddd;
		}
		text {
			font-size: 30upx;
			color: #333;
			margin-left: 20upx;
		}
	}
	.code {
		width: 690upx;
		height: 80upx;
		// background-color: orange;
		margin: 20upx 30upx 0;
		box-sizing: border-box;
		display: flex;
		position: relative;
		.shuxian {
			position: absolute;
			top: 16upx;
			right: 200upx;
			color: #ddd;
		}
		input {
			width: 490upx;
			height: 80upx;
			border: 2upx solid #333;
			border-right: 0;
			border-radius: 10upx 0 0 10upx;
			padding-left: 20upx;
			box-sizing: border-box;
		}
		.sendcode {
			width: 200upx;
			height: 80upx;
			text-align: center;
			line-height: 76upx;
			border: 2upx solid #333;
			border-left: 0;
			border-radius: 0 10upx 10upx 0;
			font-size: 30upx;
			color: #333;
			// padding: 0;
			box-sizing: border-box;
			background-color: #f5f5f5;
		}
	}
	.submit {
		width: 100%;
		height: 120upx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		button {
			width: 690upx;
			height: 80upx;
			background-color: #4b89ff;
			border-radius: 80upx;
			color: #fff;
			line-height: 80upx;
		}
	}
}



</style>